<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>uiUpload | Demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

	<!-- Stylesheet (core) -->
	<link rel="stylesheet" type="text/css" href="../css/style.css" />

	<!-- Javascript (core) -->
	<script type="text/javascript" src="../js/jquery-svn.js"></script>
	<script type="text/javascript">
	// <![CDATA[
		$.ui = {};
	// ]]>
	</script>
	<script type="text/javascript" src="../_src/ui.upload.js"></script>

	<!-- Javascript (demo) -->
	<script type="text/javascript" src="../js/script.js"></script>
	<script type="text/javascript">
	// <![CDATA[
		jQuery(document).ready(function() {
				jQuery('.inputWrapper').upload(
					{
						bDebug: true,
						oBrowse: jQuery('#btnBrowse'),
						oUpload: jQuery('#btnUpload'),
						oReset: jQuery('#btnCancel'),
						sScript: '/demo1/backend.php',
						sMovie: '/_src/ui.upload.swf',
						dMaxSize: 5120000,
						sFileFilters: [
										'All files (*.*)|*.*',
										'Images (*.gif,*.png,*.jpg)|*.gif;*.png;*.jpg'
									],
						aCallback: {
										swfInitialized: function(oUI) {
												// Flash movie succesfully created, now remove old file objects
												jQuery('.inputWrapper').remove();

												// And show the UI upload
												jQuery('.uiUpload').show();
											},
										dialogPreShow: function(oUI) {
												jQuery('.cbStatus').html('please choose some files (or show greybox)!');
											},
										dialogPostShow: function(oUI) {
												jQuery('.cbStatus').html('you have hidden the dialog and you ' + ((oUI.success == true) ? 'DID' : 'DID NOT') + ' select files!!');
											},
										queueStarted: function(oUI) {
												jQuery('.cbStatus').html('upload of current queue started!');
											},
										queueEmpty: function(oUI) {
												jQuery('.cbStatus').html('current upload queue is empty!');
											},
										fileAdded: function(oUI) {
												sHTML = '<div class="uiUploadItem" id="' + oUI.oFile.id + '">';
												sHTML+= '<div class="uiUploadItemWrapper">';
												sHTML+= '<a href="javascript://" title="Delete upload">' + oUI.oFile.name + '</a> <span class="cbInformation">(' + $.ui.upload.formatSize(oUI.oFile.size) + ')</span>';
												sHTML+= '<div class="uiUploadProgress"><div class="uiUploadProgressBar"> 0% </div></div>';
												sHTML+= '&#0187; <strong>Processed:</strong> <span class="cBytesProcessed">0 bytes</span> of <span class="cBytesTotal">' + $.ui.upload.formatSize(oUI.oFile.size) + '</span> <span class="cSpeedTime">&nbsp;</span>';
												sHTML+= '</div>';
												oHTML = jQuery(sHTML);
												jQuery('.uiUploadQueue').append(oHTML);

												// Add CSS class
												jQuery('A', oHTML).attr('class', 'uploadDelete');

												// Add handler
												var _oUI = oUI;
												jQuery('A', oHTML).click(function() {
														// Callback to Flash to remove the file from the queue
														jQuery('#' + _oUI.options.sName)[0].cancelFile(_oUI.oFile.id);

														// If the file was succesfully removed, Flash calls back to Javascript
														return false;
													});
											},
										fileCancelled: function(oUI) {
												jQuery('#' + oUI.oFile.id).remove();												
												jQuery('.cbStatus').html('file (' + oUI.oFile.name + ') cancelled!');
												alert('The file you\'ve selected (' + oUI.oFile.name + ') was removed from the queue');
											},
										fileRemoved: function(oUI) {
												jQuery('#' + oUI.oFile.id).remove();
												jQuery('.cbStatus').html('File (' + oUI.oFile.name + ') removed from queue');
												alert('The file you\'ve selected (' + oUI.oFile.name + ') was removed from the queue');
											},
										queueCancelled: function(oUI) {
												jQuery('.cbStatus').html('complete current queue cancelled!');
											},
										queueCompleted: function(oUI) {
												sStatus = 'Upload queue: Uploaded ' + oUI.oProgress.qIndex + ' of ' + oUI.oProgress.qCount + ' files. ';
												sStatus+= $.ui.upload.formatSize(oUI.oProgress.qbDone) + ' at ';
												sStatus+= $.ui.upload.formatSize(oUI.oProgress.qbSpeed) + '/sec (' + oUI.oProgress.qProgress + '%)';
												jQuery('h2.uiUploadStatus').html(sStatus);

												jQuery('.cbStatus').html('complete current queue (' + oUI.oProgress.qCount + ' items) uploaded!');
												alert('All done!');
											},
										fileStarted: function(oUI) {
												jQuery('#' + oUI.oFile.id).addClass('active').animate({ height: 80 }, 200);
												jQuery('span.cbInformation', '#' + oUI.oFile.id).html('&nbsp;');
											},
										fileProgress: function(oUI) {
												sStatus = 'Upload queue: uploading ' + oUI.oProgress.qIndex + ' of ' + oUI.oProgress.qCount + ' files. ';
												sStatus+= $.ui.upload.formatSize(oUI.oProgress.qbDone) + ' at ';
												sStatus+= $.ui.upload.formatSize(oUI.oProgress.qbSpeed) + '/sec (' + oUI.oProgress.qProgress + '%) ';
												sStatus+= $.ui.upload.formatTime(oUI.oProgress.qtRemain) + ' remaining...';
												jQuery('h2.uiUploadStatus').html(sStatus);

												// Other shite
												jQuery('div.uiUploadProgressBar', '#' + oUI.oFile.id).css('width', oUI.oProgress.cProgress + '%').html('&nbsp;' + oUI.oProgress.cProgress + '%&nbsp;');
												jQuery('span.cBytesProcessed', '#' + oUI.oFile.id).html($.ui.upload.formatSize(oUI.oProgress.cbDone));
												jQuery('span.cSpeedTime', '#' + oUI.oFile.id).html('at ' + $.ui.upload.formatSize(oUI.oProgress.cbSpeed) + '/sec; ' + $.ui.upload.formatTime(oUI.oProgress.ctRemain));
											},
										fileCompleted: function(oUI) {
												jQuery('#' + oUI.oFile.id).removeClass('active').animate({ height: 40 }, 200);
												jQuery('span.cbInformation:eq(0)', '#' + oUI.oFile.id).html('(' + $.ui.upload.formatSize(oUI.oFile.size) + ' uploaded at ' + $.ui.upload.formatSize(oUI.oProgress.cbSpeed) + '/sec; ' + $.ui.upload.formatTime(oUI.oProgress.ctBusy) + ')');
												jQuery('A', '#' + oUI.oFile.id).attr('class', 'uploadSuccess').unclick();
											},
										fileErrorSize: function(oUI) {
												jQuery('.cbStatus').html('file error: size');
												alert('Error: The file you\'ve selected (' + oUI.oFile.name + ') exceeds the maximum filesize of ' + (oUI.options.dMaxSize * 1024) + ' bytes.');
											},
										fileErrorIO: function(oUI) {
												jQuery('.cbStatus').html('file error: I/O');
												alert('Error: The file you\'ve selected (' + oUI.oFile.name + ') raised an I/O error.');
											},
										fileErrorSecurity: function(oUI) {
												jQuery('.cbStatus').html('file error: security');
												alert('Error: The file you\'ve selected (' + oUI.oFile.name + ') raised an security error.');
											},
										fileErrorHTTP: function(oUI) {
												jQuery('.cbStatus').html('file error: HTTP error');
												alert('Error: The file you\'ve selected (' + oUI.oFile.name + ') gave an HTTP error while uploading: HTTP 1.1/' + oUI.errCode);
											}
									}
					});
			});
	// ]]>
	</script>
</head>
<body>
	<h1>uiUpload &quot;demo 1&quot;</h1>
	<strong>Only file upload, no form element handling</strong><br />
	<br />

	<!-- uiUpload -->
	<div class="uiUpload">
		<h2 class="uiUploadStatus">Upload queue:</h2>
		Please choose one (or more :p) files with the Browse button.<br />
		<div class="uiUploadQueue">
		</div>
		<br />

		<button id="btnBrowse">Browse!</button> &nbsp; <button id="btnUpload">Upload!</button> &nbsp; <button id="btnCancel">Cancel!</button><br />
		<br />

		<strong>LAST CALLBACK:</strong> <span class="cbStatus">(geen)</span>
	</div>

	<div class="inputWrapper">
		THIS WILL BE REMOVED BY UIUPLOAD CODE
	</div>
</body>
</html>
